import React from 'react';
import { useHistory } from 'react-router-dom';
import {
  AppstoreOutlined,
  UserOutlined,
  SearchOutlined,
  PoweroffOutlined,
  ExclamationCircleFilled,
} from '@ant-design/icons';
import { Modal, Layout, Menu, Input } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
import styles from './index.less';
const { confirm } = Modal;

const items2 = [
  {
    key: '/home/hom',
    icon: <UserOutlined />,
    label: '首页',
  },
  {
    icon: <AppstoreOutlined />,
    label: '订单管理',
    children: [
      {
        label: '回收订单管理',
        key: '/home/Exchange',
      },
      {
        label: '兑换订单管理',
        key: '/home/Recall',
      },
    ],
  },
  {
    icon: <AppstoreOutlined />,
    label: '设备管理',
    children: [
      {
        label: '设备申请',
        key: '/home/request',
      },
      {
        label: '设备管理',
        key: '/home/management',
      },
      {
        label: '设备监控',
        key: '/home/monitoring',
      },
    ],
  },
  {
    icon: <AppstoreOutlined />,
    label: '系统管理',
    children: [
      {
        label: '门店管理',
        key: '/home/system',
      },
      {
        label: '成员管理',
        key: '/home/Member',
      },
      {
        label: '接单管理',
        key: '/home/order',
      },
    ],
  },
];
const App = (props: any) => {
  const history = useHistory();
  const showPromiseConfirm = () => {
    confirm({
      title: '退出系统',
      icon: <ExclamationCircleFilled />,
      content: '请确认是否退出系统？',
      okText: '退出',
      cancelText: '取消',
      onOk() {
        return new Promise((resolve, reject) => {
          setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
        }).catch(() => history.push('/login'));
      },
      onCancel() {},
    });
  };
  let userinfo: any = JSON.parse(
    localStorage.getItem('userinfo') || '{"cname":"卡芙卡"}',
  );
  return (
    <Layout hasSider style={{ height: '100vh' }}>
      <Sider
        style={{
          background: 'white',
          overflow: 'hidden',
        }}
        width={220}
      >
        <div
          style={{
            height: '6vh',
            color: 'rgba(95, 114, 226)',
            fontSize: '2.1vh',
            fontWeight: '800',
            marginTop: '1vh',
          }}
        >
          OMINI回收平台·门店端
        </div>
        <Menu
          mode="inline"
          defaultSelectedKeys={['/home/hom']}
          style={{
            height: '94vh',
          }}
          items={items2}
          onSelect={(e) => {
            history.push(e.key);
          }}
        />
      </Sider>
      <Layout>
        <Header className={styles.layoutheader}>
          <Input
            className={styles.input}
            size="large"
            placeholder="
          请输入订单号进行搜索"
            prefix={<SearchOutlined />}
          />
          <div className={styles.userinfo}>
            <PoweroffOutlined
              style={{ fontSize: '18px' }}
              onClick={showPromiseConfirm}
            />
            <img
              src="https://img1.baidu.com/it/u=2657667390,424666449&fm=253&fmt=auto?w=800&h=800"
              alt=""
            />
            {userinfo.cname}
          </div>
        </Header>
        <Content>{props.children}</Content>
      </Layout>
    </Layout>
  );
};
export default App;
